<template>
  <van-nav-bar :title="(type ? '动态' : '静态') + '算力明细'" left-text="" left-arrow @click-left="onClickLeft" fixed
    placeholder />
  <div class="page">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <div class="name" v-if="item.description">{{ item.description }}</div>
          <div class="name" v-else>{{ `参与质押${item.frmAmount ? item.frmAmount + 'BBL' : ''}${item.nftAmount ? item.nftAmount
            + 'NFT' : ''}` }}</div>
          <div class="time" v-if="item.description">{{ proxy.plusXing(item.children, 6, 8, '.', 4) }}</div>
          <div class="time" v-else>{{ item.createdTime }}</div>
        </div>
        <div class="rig">+{{ item.power }}</div>
      </div>
    </van-list>
  </div>
</template>
<script name="power" lang="ts" setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { stakeInfoPage, dynamicPowerPage } from '@/api/request'
import { useRoute } from "vue-router";

interface listType {
  address: string,
  power: number,
  description: string,
  children: string,
  frmAmount: number,
  nftAmount: number,
  createdTime: string
}
const { proxy } = getCurrentInstance() as any;
const list = ref<listType[]>([]);
const page = ref(1)
const loading = ref(false);
const finished = ref(false);
const route = useRoute();
const type = route.query.type == '1'

const onLoad = async () => {
  let fn = type ? dynamicPowerPage : stakeInfoPage
  let res = await fn({ page: page.value })
  let data = res.data
  if (res.status == 200) {
    if (page.value == 1) {
      list.value = []
    }
    loading.value = false;
    list.value = list.value.concat(data.records)
    if (data.records.length < 20) {
      finished.value = true;
    } else {
      page.value++
    }
  }
}
const onClickLeft = () => history.back();
</script>
<style lang="less" scoped>
.page {
  background: #E9E9E9;
  min-height: calc(100vh - 50px);
  padding: 13px;
  padding-bottom: 50px;

  .item {
    height: 66px;
    background: #FFFFFF;
    border-radius: 15px;
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;

    .left {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 1;
      }

      .time {
        margin-top: 10px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #767676;
        line-height: 1;
      }
    }

    .rig {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #63A0FE;
    }
  }
}
</style>